<template>
  <div style="max-width: 1000px; margin: 0 auto; padding: 20px;">
    <h1>🖼️ 图片加载优化演示</h1>

    <!-- 安装提示 -->
    <div style="background: #fff3cd; border: 2px solid #ffc107; padding: 20px; margin: 20px 0; border-radius: 8px;">
      <h3 style="margin-top: 0;">⚠️ 使用前提</h3>
      <ol>
        <li>确保已安装: <code>npm install @nuxt/image</code></li>
        <li>确保 <code>nuxt.config.ts</code> 中已添加: <code>modules: ['@nuxt/image']</code></li>
        <li><strong>重要：修改配置后必须重启开发服务器！</strong></li>
      </ol>
    </div>

    <!-- 方式1：assets 目录的图片 -->
    <div style="border: 2px solid orange; padding: 20px; margin: 20px 0; border-radius: 8px;">
      <h2>📂 方式1：assets 目录（需要构建处理）</h2>
      <div style="display: flex; gap: 30px; align-items: flex-start; flex-wrap: wrap;">
        <div>
          <h4>普通 img 标签：</h4>
          <img src="~/assets/image/cute.png" alt="可爱图片" style="width: 180px; border-radius: 8px;">
          <p style="color: #666; font-size: 0.9em;">路径: <code>~/assets/image/cute.png</code></p>
        </div>
      </div>
      <p style="color: #ff6b6b; margin-top: 15px;">
        ❌ 问题：没有懒加载、没有响应式、没有格式优化、阻塞渲染
      </p>
    </div>

    <!-- 方式2：public 目录的图片 -->
    <div style="border: 2px solid blue; padding: 20px; margin: 20px 0; border-radius: 8px;">
      <h2>📁 方式2：public 目录（静态资源）</h2>
      <div style="display: flex; gap: 30px; align-items: flex-start; flex-wrap: wrap;">
        <div>
          <h4>普通 img 标签：</h4>
          <img src="/image/cute.png" alt="可爱图片" style="width: 180px; border-radius: 8px;">
          <p style="color: #666; font-size: 0.9em;">路径: <code>/image/cute.png</code></p>
        </div>
      </div>
      <p style="color: #ff6b6b; margin-top: 15px;">
        ❌ 同样的问题：没有优化
      </p>
    </div>

    <!-- 方式3：使用 NuxtImg（推荐） -->
    <div style="border: 2px solid green; padding: 20px; margin: 20px 0; border-radius: 8px; background: #f0f8f0;">
      <h2>✅ 方式3：使用 NuxtImg（推荐）</h2>
      
      <div style="margin: 20px 0;">
        <h4>基础用法：</h4>
        <NuxtImg 
          src="/image/cute.png" 
          alt="可爱图片" 
          width="180"
          style="border-radius: 8px;"
        />
        <pre style="background: #2d2d2d; color: #f8f8f2; padding: 15px; border-radius: 5px; margin-top: 10px; overflow-x: auto;">
&lt;NuxtImg 
  src="/image/cute.png" 
  alt="可爱图片" 
  width="180"
/&gt;</pre>
      </div>

      <div style="margin: 20px 0;">
        <h4>带懒加载：</h4>
        <NuxtImg 
          src="/image/cute.png" 
          alt="可爱图片" 
          width="180"
          loading="lazy"
          style="border-radius: 8px;"
        />
        <pre style="background: #2d2d2d; color: #f8f8f2; padding: 15px; border-radius: 5px; margin-top: 10px; overflow-x: auto;">
&lt;NuxtImg 
  src="/image/cute.png" 
  alt="可爱图片" 
  width="180"
  loading="lazy"
/&gt;</pre>
      </div>

      <div style="margin: 20px 0;">
        <h4>使用 NuxtPicture（多格式支持）：</h4>
        <NuxtPicture 
          src="/image/cute.png" 
          alt="可爱图片" 
          width="180"
          :img-attrs="{ style: 'border-radius: 8px;' }"
        />
        <pre style="background: #2d2d2d; color: #f8f8f2; padding: 15px; border-radius: 5px; margin-top: 10px; overflow-x: auto;">
&lt;NuxtPicture 
  src="/image/cute.png" 
  alt="可爱图片" 
  width="180"
/&gt;</pre>
      </div>

      <div style="background: #d4edda; padding: 15px; border-radius: 5px; margin-top: 20px;">
        <h4 style="margin-top: 0;">✨ NuxtImg 的优势：</h4>
        <ul>
          <li>✅ 自动懒加载（不会阻塞首屏渲染）</li>
          <li>✅ 自动格式优化（自动转换为 WebP 等现代格式）</li>
          <li>✅ 自动响应式（根据设备自动调整尺寸）</li>
          <li>✅ 自动压缩（减小文件体积）</li>
          <li>✅ 占位符支持（避免布局偏移）</li>
        </ul>
      </div>
    </div>

    <!-- 图片路径说明 -->
    <div style="border: 2px solid purple; padding: 20px; margin: 20px 0; border-radius: 8px;">
      <h2>📝 图片路径说明</h2>
      <table style="width: 100%; border-collapse: collapse; margin-top: 15px;">
        <thead>
          <tr style="background: #f0f0f0;">
            <th style="border: 1px solid #ddd; padding: 10px; text-align: left;">目录</th>
            <th style="border: 1px solid #ddd; padding: 10px; text-align: left;">路径写法</th>
            <th style="border: 1px solid #ddd; padding: 10px; text-align: left;">说明</th>
            <th style="border: 1px solid #ddd; padding: 10px; text-align: left;">推荐</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td style="border: 1px solid #ddd; padding: 10px;"><code>public/image/</code></td>
            <td style="border: 1px solid #ddd; padding: 10px;"><code>/image/cute.png</code></td>
            <td style="border: 1px solid #ddd; padding: 10px;">静态资源，直接访问</td>
            <td style="border: 1px solid #ddd; padding: 10px;">✅ 推荐用于图片</td>
          </tr>
          <tr>
            <td style="border: 1px solid #ddd; padding: 10px;"><code>assets/image/</code></td>
            <td style="border: 1px solid #ddd; padding: 10px;"><code>~/assets/image/cute.png</code></td>
            <td style="border: 1px solid #ddd; padding: 10px;">需要构建处理的资源</td>
            <td style="border: 1px solid #ddd; padding: 10px;">⚠️ 适合小图标、CSS</td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- 性能对比 -->
    <div style="border: 2px solid #17a2b8; padding: 20px; margin: 20px 0; border-radius: 8px;">
      <h2>⚡ 性能对比</h2>
      <p>打开浏览器开发者工具（F12）→ Network 面板，刷新页面查看：</p>
      <ul>
        <li><strong>普通 img：</strong> 加载原始大小的图片，可能有几MB</li>
        <li><strong>NuxtImg：</strong> 自动优化后的图片，可能只有几十KB</li>
      </ul>
      <p style="color: #28a745; font-weight: bold; margin-top: 15px;">
        💡 使用 NuxtImg 可以将图片体积减少 50-90%！
      </p>
    </div>

    <!-- 故障排除 -->
    <div style="border: 2px solid #dc3545; padding: 20px; margin: 20px 0; border-radius: 8px; background: #fff5f5;">
      <h2>🔧 如果图片显示不出来？</h2>
      <ol>
        <li><strong>检查安装：</strong> 运行 <code>npm install @nuxt/image</code></li>
        <li><strong>检查配置：</strong> 确保 <code>nuxt.config.ts</code> 中有 <code>modules: ['@nuxt/image']</code></li>
        <li><strong>重启服务器：</strong> 按 Ctrl+C 停止，然后重新运行 <code>npm run dev</code></li>
        <li><strong>检查图片路径：</strong> 确保图片在 <code>public/image/cute.png</code></li>
        <li><strong>查看控制台：</strong> 检查是否有错误信息</li>
      </ol>
    </div>

    <hr style="margin: 40px 0;">
    <div style="text-align: center;">
      <NuxtLink to="/nuxtimg-principle" style="display: inline-block; background: #2196f3; color: white; padding: 12px 30px; border-radius: 5px; text-decoration: none; font-weight: 500; margin-right: 10px;">
        🔍 了解 NuxtImg 工作原理
      </NuxtLink>
      <NuxtLink to="/" style="display: inline-block; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 12px 30px; border-radius: 5px; text-decoration: none; font-weight: 500;">
        ⬅️ 返回学习中心
      </NuxtLink>
    </div>
  </div>
</template>

<script setup lang="ts">
// 检测 @nuxt/image 是否可用
onMounted(() => {
  console.log('📸 图片优化演示页面已加载')
  console.log('💡 提示: 如果 NuxtImg 不显示，请确保已安装 @nuxt/image 并重启服务器')
})
</script>

<style scoped>
code {
  background: #f0f0f0;
  padding: 2px 8px;
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  color: #d63384;
  font-size: 0.9em;
}

h2 {
  color: #333;
  margin-top: 0;
}

h4 {
  color: #555;
  margin-bottom: 10px;
}
</style>

